<header id="cjHeader">
  <!-- 这是导航栏的外部宽度，container写在这个里面，否则整个导航栏宽度都会缩短 -->
  <nav class="navbar navbar-expand-lg  bg-dark navbar-dark navber-cj">
    <div class="container">

      <!-- <a class="navbar-brand" href="#">Navbar</a> -->
      <a class="navbar-brand d-flex align-items-center justify-content-center" href="#">
        <img src="../images/logo.png" />
      </a>
      <!--创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget"类，
        div（button下方的div元素）元素上的 id 匹配按钮 data-target 的上指定的 id-->
      <!-- 只能修改下id，data-toggle="collapse"别去动它 -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-cj"
        aria-controls="navbar-cj" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!--在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, 
        div 元素上的 id 匹配上面button按钮 data-target 的上指定的 id
       -->
      <div class="collapse navbar-collapse" id="navbar-cj">
        <!--navbar-nav：必备的；mr-auto：margin-right:auto-->
        <ul class="navbar-nav mr-auto">
          <!--active：代表被选中-->
          <li class="nav-item active">
            <a class="nav-link" href="../index.html">首页</a>
          </li>

          <!--dropdown：指定一个下拉菜单-->
          <li class="nav-item dropdown">
            <!--dropdown-toggle和data-toggle="dropdown：使用一个按钮或链接来打开下拉菜单-->
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              学科学习
            </a>
            <!-- 实际的下拉菜单数据 -->
            <!--dropdown-menu：来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类-->
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Web前端+全栈</a>
              <!--! dropdown-divider：用于在下拉菜单中创建一个水平的分割线-->
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Python+人工智能</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">JavaEE+大数据</a>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">服务体系</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">软件工具</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">专题学习</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="#">就业指导</a>
          </li>
        </ul>
        <!-- 登录注册部分 -->
        <ul class="nav navbar-nav navbar-right">
          <li class="nav-item active"><a class="nav-link" href="../html/login.html">登录</a></li>
          <li class="nav-item"><a class="nav-link" href="../html/register.html">注册</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>